<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tagged template literals</title>
</head>
<body>
<script>
  
  // Tag functions don't need to return a string, as shown in the following example
  function template(strings, ...keys) {
  
    console.log({strings, keys}); // <-- we can see the params passed here
    
    return ((...values) => {
      const dict = values[values.length - 1] || {};
      const result = [strings[0]];
      keys.forEach((key, i) => {
        const value = Number.isInteger(key) ? values[key] : dict[key];
        result.push(value, strings[i + 1]);
      });
      return result.join('');
    });
  }
  
  var getName = template`${0} ${'name'}!`;
  getName( 'Hello', { name: 'World' } );  // "Hello World!"
  
</script>
</body>
</html>
